
@import "compass/css3";

/*variables*/
$main-color: #191919;
$white-color: #fff;
$border-radius: 3px 3px 3px 3px;


$font-nexa-regular : "nexa_slab_regularregular", Helvetica, Arial, sans-serif !default;
$font-nexa-heavy : "nexa_slab_heavyregular", Helvetica, Arial, sans-serif !default;
$font-nexa-light : "nexa_slablight", Helvetica, Arial, sans-serif !default;
$font-nexa_slabxbold : "nexa_slabxbold", Helvetica, Arial, sans-serif !default;
$font-nexa_black : "nexa_slab_blackregular", Helvetica, Arial, sans-serif !default;
$font-nexa_book : "nexa_slab_bookregular", Helvetica, Arial, sans-serif !default;

@mixin no-outline {
  a {
    outline : none;
    -moz-outline: none;
    }
}    
@mixin a-not-button {
  a:not(.button) {
    background : transparent;
    padding: 0 px;
    }
}  

header{
    background: url("/libs/css/assets/header_bkg.png") repeat-x scroll 0 0 #f1f1f1; 
    height:90px;
    position: relative;
    z-index:1;
    
    .logo_ca {
        background-image: url("/libs/css/assets/header_logo_ca.png");
        background-position: center top;
        background-repeat: no-repeat;
        display: block;
        height: 148px;
        text-indent: -9999px;
        width: 190px;
        position: absolute;
        top:0px;
        left:0px;
        z-index : 1000;
    }
    
    .logo_ca_errore {
        background-image: url("/libs/css/assets/header_logo_ca_errore.png");
        background-position: center top;
        background-repeat: no-repeat;
        display: block;
        height: 56px;
        text-indent: -9999px;
        width: 180px;
        position: absolute;
        top:30px;
        left:40%;
        z-index : 1000;
    }
    
    
    .logo_cs {
        background-image: url("/libs/css/assets/header_logo_cs.png");
        background-position: center top;
        background-repeat: no-repeat;
        display: block;
        height: 18px;
        text-indent: -9999px;
        width: 172px;
    }
    
    .up {
        width:100%;
        height:28px;
        padding-top: 0.4em;
        .left {width: 172px; margin-left:20%;}
        .right {margin-bottom: 0; margin-top: -6px;}
        .fb {background: url("/libs/css/assets/header_facebook.png") no-repeat; margin-top:0.5em;}
        .tw {background: url("/libs/css/assets/header_twitter.png") no-repeat; margin-top:0.5em;}
        .social {
            margin-left:0px;
            a {width:22px; height:18px;}
         } 
    }
    
    .top-bar {
        background: transparent;
        margin-bottom:0;
        height: 62px;
        line-height: 62px;
    }
    
    
    .top-bar-section {
        display: table;
        width: 100%;
        .unlogged-user {display: none;}
        .menu_display {
            padding-left: 20%;
            & > div {
                display: table-cell;
                text-align: center;
                vertical-align: middle;
            }
            .passaparola {
                text-align: left;
                width: 70px;
                a.star{
                    display: block;
                    background-image: url("/libs/css/assets/header_star_icon.png");
                    background-repeat: no-repeat;
                    background-position: 0 0px;
                    color: $main-color;
                    display: inline;
                    height: 16px;
                    &:hover {
                        background-position: 0 -19px;
                    }
                    span {
                        margin-left: 20px;
                        font-size: 1.0em;
                    }
                    
                }
            } /*end passaparola*/
            .search_something {
                width: 180px;
                #cerca_form {
                    position: relative;
                    width:170px;
                }
                input.search_field[type="text"] {
                    background: #fff;
                    border: none;
                    text-transform: uppercase;
                    font-family : $font-nexa_book;
                    font-size: 1.1em;
                    color: #d6d6d6;
                    top: 0;
                    width:170px;
                }
                #search_lens{
                    background: url("/libs/css/assets/header_search_icon.png") no-repeat scroll right center;
                    width:18px;
                    height:18px;
                    position: absolute;
                    right: 14px;
                    top: 7px;
                }
                .icon_arrow_up {
                    background: url("/libs/css/assets/popup_arrow.png") no-repeat scroll 0 0 transparent;
                    top: -6px;
                    height: 36px;
                    position: absolute;
                    right: 6px;
                    width: 36px;
                    z-index: 2;
                    cursor: pointer;
                }
                #search_content {
                    display: none;
                    position: absolute;
                    right: 0px;
                    top: 46px;
                    z-index: 1001;
                    background: none repeat scroll 0 0 #232E36;
                    border-radius: 3px 3px 3px 3px;
                    color: #FFFFFF;
                    width: 330px;
                    .titolo {
                        opacity: 0.8;
                        font-size: 1.2em;
                        text-align: left;
                        padding: 0 1.5em;
                        font-family: $font-nexa_slabxbold;
                    }
                    .search-box {
                        display: none;
                        max-height: 425px;
                        overflow-y: auto;
                        background: #232E36;
                    }
                    .item { 
                        @include a-not-button;
                        border-top: 1px solid #33444C;
                        padding:5px 10px;
                        height:70px;
                        a {
                            height: 52px; 
                            width: 100%; 
                            padding: 0px;
                            color : #98aebf;
                            text-align: left;
                            display: block;
                        }
                        .img_container {
                            width:95px;
                            height:50px;
                            overflow: hidden;
                            img {
                                border: 1px solid $white-color;
                                height:100%;
                            }
                        }
                        .content {
                            height: 50px;
                            padding: 3px 3px 3px 10px;
                            width: 210px;
                            clear: right;
                        }
                        .title {font-family: $font-nexa_slabxbold; font-size:1.0 em;line-height:1.0em; text-transform: uppercase;}
                        .level {font-size: 0.9em;line-height:0.9em;}
                        .price {font-family: $font-nexa_slabxbold; font-size:1.2em;line-height:1.2em;}
                      }/* close item*/
                }
            } /*end search_something*/
            .build_course {
                font-family: $font-nexa-heavy;
                font-size: 1.1em;
                width: 150px;
            } /*end build_course*/
            .pipe {
                font-family: $font-nexa-light;
                font-size: 2.0em;
            }
            .login {
                font-family: $font-nexa-heavy;
                font-size: 1.1em;
                width: 80px;
            } /*end login*/
            .achivement {
                width:150px;
                .course-list {
                    span {margin-left:0.3em;}
                    li {
                        background: transparent;
                        margin-left:0.3em;
                        & a:not(.button) {padding:0px !important;}
                        a {
                            background: transparent;
                            color: $main-color;
                            font-size: 1.0em;
                            font-family: $font-nexa_slabxbold;
                        }
                    }
                }
            }
            .menu_user {
                font-family: $font-nexa-heavy;
                font-size: 1.1em;
                min-width: 160px;
                padding: 0 0.5em;
                a {
                    display: block;
                    color:$main-color;
                }
                .dropDownMenuClose {
                    width: 160px;
                    position: relative;
                    cursor: pointer;
                }
                .dropDownMenuOpen{
                    width: 160px;
                    position: relative;
                    cursor: pointer;
                }
                .username {
                    display: inline-block;
                    span {
                        font-size: 1.2em;
                    }
                }
                .item_icon {
                    width:19px;
                }
                .icon_arrow_down{
                    background: url("/libs/css/assets/popup_arrow_user.png") no-repeat;
                    height:19px;
                    width:19px;
                    display: inline-block;
                    vertical-align: text-top;
                }
                .icon_arrow_up{
                    background: url("/libs/css/assets/popup_arrow.png") no-repeat;
                    height:36px;
                    width:36px;
                    position: absolute;
                    bottom: -30px;
                    right: 0px;
                    z-index: 2;
                }
                #menu_user_content {
                    display: none;
                    position: absolute;
                    z-index: 1;
                    right: 155px;
                   // top: 50px;
                    #myMenuDropdown {
                        background: #232e36;
                        color:$white-color;
                        border-radius:$border-radius;
                        width: 330px;
                    }
                    .submenu-title {
                        height:40px; 
                        line-height:40px; 
                        text-align: center;
                        border-bottom:1px solid #33444c;
                        a {
                            font-size: 1.2em;
                            color: #5d707f;
                            &:hover{
                                color: #fff;
                            }
                        }
                    }
                    a.submenu_title_link {
                        color: $white-color;
                        font-size: 1.5em;
                        &:hover{
                            color: $white-color;
                        }
                    }
                    .submenu-box{
                        width: 100%;
                        height: auto;
                        margin-top: 20px;
                        display: none;
                        overflow: hidden;
                        background: transparent;
                    }
                    .item { 
                        @include a-not-button;
                        padding:5px 10px;
                        height:70px;
                        a {
                            height: 52px; 
                            width: 100%; 
                            padding: 0px;
                            color : #98aebf;
                            text-align: left;
                            display: block;
                        }
                        .img_container {
                            width:95px;
                            height:50px;
                            overflow: hidden;
                            img {
                                border: 1px solid $white-color;
                                width:100%;
                            }
                        }
                        .content {
                            height: 50px;
                            padding: 3px 3px 3px 10px;
                            width: 210px;
                            clear: right;
                        }
                        .title {font-family: $font-nexa_slabxbold; font-size:1.0 em;line-height:1.0em; text-transform: uppercase;}
                        .level {font-size: 0.9em;line-height:0.9em;}
                        .price {font-family: $font-nexa_slabxbold; font-size:1.2em;line-height:1.2em;}
                      }
                      .uspp_viewall {
                          text-align: right;
                          padding: 0 1em;
                          a {
                                color:$white-color; 
                                font-size: 0.9em;
                            }
                       }
                      .uspp_viewpp {
                            clear: both; 
                            background: #e5e5e5;
                            text-align: center;
                            text-transform: uppercase; 
                            a {
                                color: #1c3037;
                                font-family : $font-nexa-heavy;
                            }
                        }
                            
                } /* end menu_user_content*/
            } /* end menuUser*/     
        } /*end menu display*/
    }/*end top-bar-section */   
}/*end header*/
